<template>
  <el-container>
    <el-container>
      <el-main>
        <el-row :gutter="24">
          <el-col :span="6" v-for="item in showList" :key="item.id">
            <el-card shadow="always">
              <span  class="title"><i :class="item.icon"></i>&nbsp;{{item.name}}</span>
              <animate-number style="float: right" from="0" :to="item.total" duration="1000"></animate-number>
            </el-card>
          </el-col>
        </el-row>
        <div class="charts">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-card shadow="always">
                <div id="ratioOfMW" :style="{width: '800px', height: '650px'}"></div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card shadow="always">
                <div id="ratioOfMajor" :style="{width: '800px', height: '650px'}"></div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {getRatioOfMajor, getRatioOfMW, studentCount} from "@/api/student";
import {teacherCount} from "@/api/teacher";
import {majorCount} from "@/api/major";
import {departmentCount} from "@/api/department";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  data(){
    return{
      showList:[],
      ratioOfMWData: [],
      ratioOfMajorData: [],
    }
  },
  methods:{
    load(){
      studentCount().then(res => {
        this.showList.push(res.data)
      })
      teacherCount().then(res => {
        this.showList.push(res.data)
      })
      majorCount().then(res => {
        this.showList.push(res.data)
      })
      departmentCount().then(res => {
        this.showList.push(res.data)
      })
      getRatioOfMW().then(res => {
        this.ratioOfMW.dispose();
        this.ratioOfMWData = res.data;
        this.drawRatioOfMW();
      })
      getRatioOfMajor().then(res => {
        this.ratioOfMajor.dispose();
        this.ratioOfMajorData = res.data;
        this.drawRatioOfMajor();
      })
    },
    drawRatioOfMW(){//男女学生比例
      this.ratioOfMW = this.$echarts.init(document.getElementById('ratioOfMW'));
      this.ratioOfMW.setOption({
        title: {
          text: '男女生比例（学生）',
          left: 'center',
          textStyle: {
            color: '#999',
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '男女生比例（学生）',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.ratioOfMWData
          }
        ]
      });
    },
    drawRatioOfMajor(){//专业人数比例
      this.ratioOfMajor = this.$echarts.init(document.getElementById('ratioOfMajor'));

      this.ratioOfMajor.setOption({
        title: {
          text: '专业人数比例（学生）',
          left: 'center',
          textStyle: {
            color: '#999',
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '专业人数比例（学生）',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.ratioOfMajorData
          }
        ]
      })
    }
  },
  created() {
    this.load();
  },
  mounted(){
    this.drawRatioOfMW();
    this.drawRatioOfMajor();
  },
}
</script>

<style lang="less" scoped>

.el-row{
  font-weight: bold;
  font-size: 30px;
  //font-family: 华文行楷,serif;
  .el-card{

  }
  .title{
    color: #62d1ff;
  }
}

.charts{
  margin-top: 24px;
}


</style>